<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>LCD clock</title>

    <style>
      .container {
        width: 690px;
        height: 150px;
        margin: 100px auto;
        background-color: rgba(149, 142, 113, 1);
        border: 10px solid black;
        border-radius: 10px;
        padding: 10px;
        position: relative;
      }
      img {
        height: 150px;
      }
      .screen {
        position: absolute;
        left: 10px;
        top: 10px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="bg">
        <img src="./img/bg.svg" alt="" />
        <img src="./img/bg.svg" alt="" />
        <img src="./img/s.svg" alt="" />
        <img src="./img/bg.svg" alt="" />
        <img src="./img/bg.svg" alt="" />
        <img src="./img/s.svg" alt="" />
        <img src="./img/bg.svg" alt="" />
        <img src="./img/bg.svg" alt="" />
      </div>
      <div class="screen">
        <img src="./img/0.svg" alt="" />
        <img src="./img/0.svg" alt="" />
        <img src="./img/s.svg" alt="" />
        <img src="./img/0.svg" alt="" />
        <img src="./img/0.svg" alt="" />
        <img src="./img/s.svg" alt="" />
        <img src="./img/0.svg" alt="" />
        <img src="./img/0.svg" alt="" />
      </div>
    </div>
    <script>
      let path = [
        "./img/0.svg",
        "./img/1.svg",
        "./img/2.svg",
        "./img/3.svg",
        "./img/4.svg",
        "./img/5.svg",
        "./img/6.svg",
        "./img/7.svg",
        "./img/8.svg",
        "./img/9.svg"
      ];
      let screenImgs = document.querySelectorAll(".screen img");
      setInterval(function() {
        //生成当前的时间对象
        let timeObj = new Date();
        let hour = timeObj
          .getHours()
          .toString()
          .padStart(2, "0");
        // let hour = timeObj.getHours() >= 10 ? timeObj.getHours() : '0' + timeObj.getHours()
        let minute = timeObj
          .getMinutes()
          .toString()
          .padStart(2, "0");
        let second = timeObj
          .getSeconds()
          .toString()
          .padStart(2, "0");
        setImg(screenImgs[0], hour[0]);
        setImg(screenImgs[1], hour[1]);
        setImg(screenImgs[3], minute[0]);
        setImg(screenImgs[4], minute[1]);
        setImg(screenImgs[6], second[0]);
        setImg(screenImgs[7], second[1]);
      }, 1000);

      function setImg(imgEle, num) {
        imgEle.src = path[num];
      }
    </script>
  </body>
</html>
